import React from 'react';
import zkcblBtn from '@/assets/images/zkcbl.png'
import { getDynamicFonts } from '@/utils/fontUtils';
import { useTranslation, Trans } from 'react-i18next';

interface ChatContentHeaderProps {
    aiAvatarComponent: React.ReactNode;
    aiData: { name: string };
    onShowActions: React.MouseEventHandler<HTMLDivElement>;
    albumCollapsed: boolean;
    onToggleAlbum: () => void;
    generateVoice: boolean;
    setGenerateVoice: (v: boolean) => void;
    loading: boolean;
    handleVoiceSendMessage: () => void;
    t: any;
    status?: boolean; // 新增：在线状态
}

const ChatContentHeader: React.FC<ChatContentHeaderProps> = ({ aiAvatarComponent, aiData, albumCollapsed, onToggleAlbum, generateVoice, setGenerateVoice, status }) => {
    const { t, i18n } = useTranslation();
    const dynamicFonts = getDynamicFonts(i18n);

    return (
        <div className="sticky top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-[rgb(19,19,19)] bg-opacity-95 border-b border-[rgb(54,54,54)]">
            <div className="flex items-center">
                {/* AI头像  */}
                <div className="animate-fadeIn" style={{ animationDelay: '0ms', animationDuration: '150ms' }}>
                    {React.isValidElement(aiAvatarComponent)
                        ? React.cloneElement(aiAvatarComponent as React.ReactElement<any>, { size: 50 })
                        : aiAvatarComponent}
                </div>
                {/* 名字和机器人的在线状态 */}
                <div >
                    {/* 名字  */}
                    <p style={{ fontFamily: dynamicFonts.font1 }} className="ml-3 text-[1.3rem] text-white">{aiData.name}</p>
                    {/* 在线状态 */}
                    <div className='flex items-center mt-1 ml-3'>
                        {/* 状态指示圆点  */}
                        <div className={`w-2.5 h-2.5 rounded-full mr-2  ${status ? 'bg-green-500 animate-breath' : 'bg-gray-400'}`}></div>
                        {/* 状态说明  */}
                        <span className="text-xs text-white select-none" style={{ fontFamily: dynamicFonts.font2 }}>
                            {status ? t('chat.online') : t('chat.offline')}
                        </span>
                    </div>
                </div>
                {/* 预留的语音模式按钮 */}
                {/* <div className="ml-1 flex items-center">
                <label className="flex items-center ml-2 text-gray-300 cursor-pointer select-none">
                    <input
                        type="checkbox"
                        checked={generateVoice}
                        onChange={e => setGenerateVoice(e.target.checked)}
                        className="hidden"
                    />
                    <i
                        className={`fas fa-volume-up text-xl transition-colors mr-1 ${generateVoice ? 'text-[#4f9fff]' : 'text-gray-400'}`}
                        style={{ filter: generateVoice ? 'drop-shadow(0 0 4px #4f9fff)' : 'none' }}
                    ></i>
                </label>
            </div> */}
            </div>
            <div className="flex items-center space-x-2 cursor-pointer">
                {/* <div className="text-gray-400 p-2 rounded-full flex items-center " onClick={onShowActions}>
                <i className="fas fa-ellipsis-v"></i>
            </div> */}
                <div
                    className="text-gray-400 p-2 rounded-full transition-colors focus:outline-none"
                    onClick={onToggleAlbum}
                    title={albumCollapsed ? '展开相册区' : '收起相册区'}
                >
                    <img className='w-5 h-5' src={zkcblBtn}></img>
                </div>
            </div>
            {/* 呼吸灯动画样式 */}
            <style>{`
                @keyframes breath {
                  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
                  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
                  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
                }
                .animate-breath {
                  animation: breath 1.6s infinite;
                }
            `}</style>
        </div>
    );
};

export default ChatContentHeader; 